<template>
  <div>
    <h3>{{ title }}</h3>
    <el-form :model="form">
      <el-form-item label="菜单名称：">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="菜单路径：">
        <el-input v-model="form.href" />
      </el-form-item>

      <el-form-item label="上级菜单：">
        <el-select v-model="form.parentId" placeholder="请选择上级菜单">
          <el-option label="顶层菜单" :value="-1" />
          <el-option
            v-for="menu in topMenus"
            :key="menu.id"
            :label="menu.name"
            :value="menu.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="描述内容：">
        <el-input v-model="form.desc" />
      </el-form-item>

      <el-form-item label="图标名称：">
        <el-input v-model="form.icon" />
      </el-form-item>

      <el-form-item label="是否显示：">
        <el-radio-group v-model="form.shown">
          <el-radio label="显示" :value="true"></el-radio>
          <el-radio label="隐藏" :value="false"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="选择排序：">
        <el-input type="text" v-model="form.ordrtNum" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">创建更新</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getAllMenu, saveOrUpdate } from "@/api/menu";
import { useRoute } from "vue-router";
export default {
  name: "CreateOrEdit",
  data() {
    return {
      title: "创建或编辑",
      form: {
        name: "",
        href: "",
        parentId: -1,
        desc: "",
        icon: "",
        shown: true,
        ordrtNum: 0,
      },
      topMenus: [],
      menuList: [],
    };
  },
  created() {
    this.getMenuList();
    this.route();
  },
  methods: {
    // 获取路由参数
    route() {
      const route = useRoute();
      console.log(route.params.id);
    },
    // 获取菜单列表
    getMenuList() {
      getAllMenu().then((res) => {
        //1. 获取所有菜单  2.过滤一级菜单
        if (res.data.code === "000000") {
          const allMenus = res.data.data;
          this.topMenus = allMenus.filter((menu) => menu.level === 0);
        } else {
          this.$message.error("菜单列表数据异常");
        }
      });
    },

    // 提交表单
    onSubmit() {
      const validateField = (field, message) => {
        if (field === "") {
          this.$message.error(message);
          return false;
        }
        return true;
      };
      if (
        !validateField(this.form.name, "菜单名称不能为空!") ||
        !validateField(this.form.href, "菜单路径不能为空!")
      ) {
        return;
      }
      const data = {  
        id: this.$route.params.id,
        name: this.form.name,
        href: this.form.href,
        parentId: this.form.parentId,
        desc: this.form.desc,
        icon: this.form.icon,
        shown: this.form.shown,
        ordrtNum: this.form.ordrtNum,
      };
      saveOrUpdate(data).then((res) => {
        if (res.data.code === "000000") {
          this.$message.success("添加菜单成功!");
          console.log(this.form);
          localStorage.setItem("menuList", JSON.stringify(this.form));
          this.$router.push({
            path: "/permission/menu",
            query: {
              reload: true,
            },
          });
        } else {
          this.$message.error("添加菜单失败!");
        }
      });
    },
    onCancel() {
      this.$confirm("确认取消操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.form = {
            name: "",
            href: "",
            parentId: -1,
            desc: "",
            icon: "",
            shown: true,
            ordrtNum: 0,
          };
          this.$router.push({
            path: "/permission/menu",
            query: {
              reload: true,
            },
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          return false;
        });
    },
  },
};
</script>
<style scoped></style>
